<template>
	<view>
		<view v-if="message.payload.operationType === 1" class="card handle">
			<view>
				<view class="time">{{messageTime}}</view>
				{{renderDom}}
			</view>
			<view class="choose">
				<view class="button" @tap="handleClick">处理</view>
			</view>
		</view>
		<view class="card" v-else>
			<view class="time">{{messageTime}}</view>
			{{renderDom}}
		</view>
	</view>
</template>

<script>
	import {
		parseGroupSystemNotice
	} from '../../../base/message-facade';
	import {
		caculateTimeago
	} from '../../../base/common';

	export default {
		data() {
			return {
				// message: {},
				messageTime: '',
				renderDom: ''
			};
		},

		components: {},
		props: {
			message: {
				type: Object,
			},
			lang: {
				type: Object,
				default: () => {}
			},
			groupUser: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			message: {
				handler: function(newVal) {
					this.setData({
						messageTime: caculateTimeago(newVal.time * 1000, this.lang),
						renderDom: parseGroupSystemNotice(newVal, this.lang, this.groupUser)
					});
				},
				immediate: true,
				deep: true
			}
		},

		methods: {
			handleClick() {
				uni.showActionSheet({
					itemList: ['同意', '拒绝'],
					success: res => {
						const option = {
							handleAction: 'Agree',
							handleMessage: '欢迎进群',
							message: this.message
						};

						if (res.tapIndex === 1) {
							option.handleAction = 'Reject';
							option.handleMessage = '拒绝申请';
						}

						uni.$TUIKit.handleGroupApplication(option).then(() => {
							uni.showToast({
								title: option.handleAction === 'Agree' ? '已同意申请' : '已拒绝申请'
							});
						}).catch(error => {
							uni.showToast({
								title: error.message || '处理失败',
								icon: 'none'
							});
						});
					}
				});
			}
		}
	};
</script>
<style scoped>
	@import "./index.css";
</style>
